<template>
    <view class="news">
        <!-- 搜索 -->
        <view class="u-flex px-[24rpx] py-[14rpx]">
            <view class="u-flex-1 pr-[24rpx]">
                <u-input v-model="search_keyword" :customStyle="{padding: '0 10rpx'}" border borderColor="transparent" backgroundColor="#ffffff" confirmType="search" @confirm="handleSearch" />
            </view>
          
            <u-button @click="handleSearch" type="new-primary" size="medium">
                <u-icon class="u-clear-icon" :size="30" name="search" color="#ffffff"></u-icon>
            </u-button>
        </view>

        <!-- <h-news-list :list="tabList" /> -->
        <!-- 内容 -->
        <h-tabs
			bg-color="none"
            :current="current"
            @change="handleChange"
            height="80"
            bar-width="60"
            :barStyle="{ bottom: '0' }"
        >
            <tab v-for="(item, i) in tabList" :key="i" :name="item.name">
                <view class="news-list pt-[20rpx]">
                    <h-news-list :cid="item.id" :i="i" :index="current" :keyword="keyword"></h-news-list>
                </view>
            </tab>
        </h-tabs>
        <tabbar />
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import HNewsList from './component/h-news-list.vue'
import { getArticleCate } from '@/api/news'

const tabList = ref<any>([])
const current = ref<number>(0)


const handleChange = (index: number) => {
    console.log(index)
    current.value = Number(index)
}

const getData = async () => {
    const data = await getArticleCate()
    tabList.value = [{ name: '全部', id: '' }].concat(data)
}

const search_keyword = ref<string>('')
const keyword = ref<string>('')

const handleSearch = () => {
    keyword.value = search_keyword.value
}

onLoad((options) => {
    getData()
})
</script>

<style lang="scss">
.news {
    &-search {
        margin-bottom: 2rpx;
    }

    &-list {
        height: calc(100vh - 272rpx - env(safe-area-inset-bottom));
    }
}
</style>
